<template>
	<view class="entrySubmit">
		<!-- 进度填报 --- 发起提交 -->
		<view class="content required-form-Box">
			<u-form :model="form" ref="form" :rules="rules" labelPosition="left" labelWidth="auto" class="form"
				:labelStyle="{fontSize: '32rpx', fontWeight: '600',color: '#445469'}">
				<u-form-item label="项目名称" prop="projectName" borderBottom labelWidth="200rpx" @click="fnSelectProject">
					<view class="required-form-item">*</view>
					<u--input v-model="form.projectName" disabled disabledColor="#ffffff" placeholder="请选择项目名称"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
				</u-form-item>
				<u-form-item label="区间/站点" prop="lineSiteSectionName" borderBottom labelWidth="200rpx"
					@click="selectSection">
					<view class="required-form-item">*</view>
					<u--input v-model="form.lineSiteSectionName" disabled disabledColor="#ffffff" placeholder="请选择区间/站点"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
				</u-form-item>
				<u-form-item label="施工日期" prop="constructionDate" borderBottom labelWidth="200rpx"
					@click="productionDateShow=true">
					<view class="required-form-item">*</view>
					<u--input v-model="form.constructionDate" disabled disabledColor="#ffffff" placeholder="请选择施工日期"
						border="none">
					</u--input>
					<u-datetime-picker @cancel="productionDateShow=false" @confirm="productionDateConfirm"
						:show="productionDateShow" v-model="constructionDate" mode="date"
						:maxDate="new Date().getTime()"></u-datetime-picker>
					<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
				</u-form-item>
				<u-form-item label="管理人员" prop="managerPeo" borderBottom labelWidth="200rpx" @click="fnSelectPeople">
					<view class="required-form-item">*</view>
					<u--input v-model="form.managerPeo" disabled disabledColor="#ffffff" placeholder="请选择管理人员"
						border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
				</u-form-item>
				<u-form-item label="劳务人员" prop="laborNum" borderBottom labelWidth="200rpx">
					<view class="required-form-item">*</view>
					<view class="value value-nav">
						<u--input type='number' @input="form.laborNum = form.laborNum && form.laborNum.replace(/^(0+)|[^\d]+/g,'')"
							v-model="form.laborNum" placeholder="请输入数量" border="none">
						</u--input>
						<text class="day">人</text>
					</view>
				</u-form-item>
				<u-form-item label="施工工法" prop="type" borderBottom labelWidth="200rpx" @click="openPicker">
					<view class="required-form-item">*</view>
					<u--input v-model="form.type" disabled disabledColor="#ffffff" placeholder="请选择施工工法" border="none">
					</u--input>
					<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
					<u-picker :show="typeShow" keyName="name" :columns="constructionList" @cancel="typeShow=false"
						@confirm="typeConfirm"></u-picker>
				</u-form-item>
			</u-form>
		</view>
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button @click="submit"  class="button-primary">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
	import mixins from "@/utils/mixins.js"
	import { pmPlanWorkloadList } from "@/api/comprehensive/comprehensive.js"
	export default {
		name: "proFillForm",
		mixins: [mixins],
		props: {
			editData: {
				type: Object,
				default: () => ({})

			},
			isContinue: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			editData: {
				handler: (newV, oldV) => {
					// console.log(newV, oldV, '编辑数据')
				},
				deep: true,
				immediate: true
			},
			isContinue(newV, oldV) {
				// console.log(newV, oldV, '监听2')
			}
		},
		data() {
			return {
				loading: false,
				typeShow: false,
				form: {
					type: "", // 施工工法
					projectName: "", // 项目名称
					pmId: '', //  项目id  后面请求环号接口需要用到
					lineSiteSectionName: "", // 区间/站点
					constructionDate: "",
					managerPeo: "",
					laborNum: "", //劳务人员
					constructionMethod: '', //用于判断施工工法工作量
				},
				rules: {},
				constructionDate: Number(new Date()),
				productionDateShow: false,
				subDeviceTypeNameShow: false, // 施工工法
				constructionList: [], // 施工数组
				formData: {}, //上传对象
				returnData: [], //返回来的数组
			}
		},
		mounted() {
			// console.log(this.editData, this.isContinue,'progressFFilling页面父组件传来的值')
			//如果这个对象不为空就是从填报记录页面点击继续填报进来的
			if (Object.keys(this.editData).length) {
				let disabledData = this.editData
				this.form.projectName = disabledData.pmName
				this.form.id = disabledData.id //修改时传的id
				this.form.lineSiteSectionName = disabledData.lineSiteSectionName
				this.form.managerPeo = disabledData.pmprManagePersonList.map(item => item.personName).join('、')
				this.form.handle = disabledData.pmprManagePersonList.map(it => ({
					id: it.personId
				}))
				this.form.pmprManagePersonList = disabledData.pmprManagePersonList.map(it => ({
					pmprId: it.pmprId,
					personId: it.personId,
					personName:it.personName
				}))
				this.form.constructionDate = this.getDate(disabledData.constructionDate)
				this.form.laborNum = disabledData.laborNum
				this.form.type = this.$store.getters.dictMap['construction_method'].find(it => it.code === disabledData
						.constructionMethod).name || null,
					this.form.lineId = disabledData.lineId
				this.form.lineSiteSectionId = disabledData.lineSiteSectionId
				this.form.pmId = disabledData.pmId
				this.form.lineSiteSectionType = disabledData.lineSiteSectionType
				this.form.constructionMethod = disabledData.constructionMethod

			}
		},

		methods: {
			// 选择项目名称
			fnSelectProject() {
				this.$$off(this.$config.ENV_SELECT_PROJECT)
				this.$$on(this.$config.ENV_SELECT_PROJECT, res => {
					this.form.projectName = res.name
					this.form.pmId = res.id
					this.form = {
						...this.form
					}
				});
				//如果继续填报按钮点击过来的  需要禁用
				// console.log(this.isContinue, this.form.projectName,'选择项目')
				if (this.isContinue && this.form.projectName !== undefined) return uni.showToast({
					title: '该项已被禁用',
					icon: "none"
				})
				//切换项目后清空站点数据和施工工法
				this.form.lineSiteSectionName = ''
				this.form.type = ''
				uni.navigateTo({
					url: "/subpackage-overhaul/pages/comprehensiveOverhaul/progressFilling/components/selectProject"
				})
			},
			// 选择区间/站点
			selectSection() {
				if (this.form.projectName === '') {
					return uni.showToast({
						title: '请先选择项目',
						icon: 'none'
					})
				}
				this.$$off(this.$config.ENV_SELECT_PROJECT)
				this.$$on(this.$config.ENV_SELECT_SITE, res => {
					console.log(res, '---')
					let obj = {
						bpId: res[0].id,
						bizProjectName: res[0].name,
						sectionName: res[1].name,
						sectionType: res[1].id,
						siteId: res[2].id,
						siteName: res[2].name,
						projectCascade: `${res[0].name}/${res[1].name}/${res[2].name}`,
						projectIds: [res[0].id, res[1].id, res[2].id]
					}
					this.formData = Object.assign({}, this.formData, obj)
					// console.log(this.formData, '站点数据')
					this.form.lineSiteSectionName = this.formData.siteName
					// 拼接数据 下个页面需要用到
					this.form.lineId = this.formData.bpId //线路Id
					this.form.lineSiteSectionId = this.formData.siteId // 站点或区间id
					this.form.lineSiteSectionName = this.formData.siteName //站点或区间名称
					this.form.lineSiteSectionType = this.formData.sectionType

				});
				if (this.isContinue && this.form.lineSiteSectionName !== '') return uni.showToast({
					title: '该项已被禁用',
					icon: "none"
				})
				// 清空工法
				this.form.type = ''
				uni.navigateTo({
					url: `/subpackage-overhaul/pages/comprehensiveOverhaul/progressFilling/components/selectSectionAndSite?pmId=${this.form.pmId }&projectType=zhdx`
				})
			},

			// 选择管理人员
			fnSelectPeople() {
				uni.navigateTo({
					url: '/subpackage-overhaul/pages/comprehensiveOverhaul/progressFilling/components/selectPeople',
					//用于监听selectPeople页面发送过来的数据
					events: {
						setData: (data) => {
							// console.log("点击用户", data.data)
							let userList = data.data
							// console.error(userList, 'userList')
							this.form.handle = userList
							this.form.managerPeo = userList.map(r => r.name).join('、')
							this.form.pmprManagePersonList = userList.map(user => ({
								pmprId: null,
								personId: user.id,
								personName:user.name
							}))
							this.form = {
								...this.form
							}
							// console.log(this.form.pmprManagePersonList, '&^^^^^^^^')
						}
					},
					success: res => {
						let list = this.form.handle || []
						// console.log(list, '看谁据')
						res.eventChannel.emit('getList', {
							data: list.map(item => item.id)
						})
					}
				});
			},
			// 选择施工日期
			productionDateConfirm(val) {
				this.form.constructionDate = this.getDate(val.value, 2	)
				this.form.constructionDate = this.getDate(val.value, 2)
				this.productionDateShow = false
			},
			openPicker() {
				console.log(this.form, this.form.type, '4444')
				if (this.isContinue && this.form.type !== '') return uni.showToast({
					title: '该项已被禁用',
					icon: "none"
				})
				if (this.form.projectName === '' || this.form.lineSiteSectionName === '') return uni.showToast({
					title: '请先选择项目或者区间/站点',
					icon: "none"
				})
				this.getMethodsList()
				this.typeShow = true
			},
			//施工工法
			typeConfirm(val) {
				this.form.type = val.value[0].name
				// this.form.code = val.value[0].code
				this.form.constructionMethod = val.value[0].code
				this.typeShow = false
			},
			submit() {
				if (!this.form.projectName ||
					!this.form.lineSiteSectionName ||
					!this.form.constructionDate ||
					!this.form.managerPeo ||
					!this.form.laborNum ||
					!this.form.type) {
					return uni.showToast({
						title: '请检查信息是否填写完整',
						icon: "none"
					})
				} else {
					//新需求是 进度填报时，系统默认带出本用户上一次填报进度时选择的项目，区间，管理人员
					//采用办法是将填写的表单内容存到本地
					this.$set(this.form, 'selectedOwnerId', uni.getStorageSync('isOwner'))
					uni.setStorageSync('defaultForm', JSON.stringify(this.form))
					uni.navigateTo({
						url: `/subpackage-overhaul/pages/comprehensiveOverhaul/progressFilling/components/workLoad?preForm=${JSON.stringify(this.form)}&isContinue=${this.isContinue}&continueForm=${JSON.stringify(this.editData)}`,
					})
				}

			},
			//获取施工工序数据(钢环和微扰动)
			getMethodsList() {
				let resq = {
					params: {
						pmId: this.form.pmId, //项目id
						lineSiteSectionType: this.form.lineSiteSectionType, //站点区间类型(字典表-line_site_section_type)
						lineSiteSectionId: this.form.lineSiteSectionId, //站点或区间id
					},
					currPage: 1,
					pageSize: 999
				}
				pmPlanWorkloadList(resq).then(res => {
					if (res.result.list.length > 0) {
						let conList = []
						let vuexList = this.$store.getters.dictMap['construction_method']
						res.result.list.forEach(it1 => {
							vuexList.forEach(it2 => {
								if (it1.constructionMethod === it2.code) {
									conList.push({
										...it2
									})
								}
							})
						})
						this.constructionList = [conList]
					}
				})
			},

		},
	}
</script>

<style lang="scss" scoped>
	.entrySubmit {
		font-family: PingFang SC-Bold, PingFang SC;

		.content {
			padding: 35rpx;

			.value {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.value-nav {
				position: relative;

				.day {
					position: absolute;
					top: 10rpx;
					right: 0;
					/* #ifdef APP-PLUS || H5 */
					right: -140rpx;
					/* #endif */
				}
			}

			.addArea {
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				background: #F5F7FA;
				font-size: 32rpx;
				font-weight: bold;
				color: #445469;
				margin-top: 40rpx;
				text-align: center;
				margin-bottom: 40rpx;

				.image {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: -13rpx;
				}
			}
		}

		.outer-btn {
			height: 200rpx;

			.button {
				height: 92rpx;
				line-height: 92rpx;
				background: #2F80ED;
				color: #FFFFFF;
				text-align: center;
				font-size: 32rpx;
				margin-bottom: 50rpx;
				position: fixed;
				bottom: 0;
			}
		}

	}
</style>